<section class="jumbotron text-center">
  <div class="container">
    <h1>NGX-ECHARTS</h1>
    <p>
      <img src="https://badge.fury.io/js/ngx-echarts.svg" class="mr-2" alt="version">
      <img src="https://img.shields.io/npm/dm/ngx-echarts.svg" alt="downloads">
    </p>
    <p>
      <img src="assets/img/angular.svg" width="64px" height="64px">
      <i class="fa fa-plus fa-2x ml-3 mr-4"></i>
      <img src="assets/img/echarts-logo.png" width="50px" height="50px">
    </p>
    <p class="lead text-muted">ngx-echarts is an <strong class="text-danger">Angular</strong>(ver >= 2.x) directive for <strong class="text-danger">ECharts</strong> (ver >= 3.x)</p>
    <p>
      <a href="https://xieziyu.github.io/ngx-echarts/api-doc" target="_blank" class="btn btn-outline-success mr-2"><i class="fa fa-book"></i> Documents</a>
      <a href="https://github.com/xieziyu/ngx-echarts" class="btn btn-outline-primary"><i class="fa fa-github"></i> Github</a>
    </p>
  </div>
</section>

<div class="container">
  <div class="row">
    <div class="col-md-6 mb-3">
      <h2><span class="fa fa-caret-right mr-2 text-primary"></span>Installation</h2>
      <markdown ngPreserveWhitespaces class="code-block-sm">
        ```bash
        # if you use npm
        npm install echarts -S
        npm install ngx-echarts -S
        npm install @types/echarts -D
        
        # or if you use yarn
        yarn add echarts
        yarn add ngx-echarts
        yarn add @types/echarts -D
        ```
      </markdown>
    </div>
    <div class="col-md-6 mb-3">
      <h2><span class="fa fa-caret-right mr-2 text-primary"></span>Import</h2>
      <markdown ngPreserveWhitespaces class="code-block-sm">
        ```typescript
        import {{'{'}} NgxEchartsModule } from 'ngx-echarts';

        @NgModule({{'{'}}
          imports: [
            ...,
            NgxEchartsModule
          ],
        })
        export class AppModule {{'{'}} }
        ```
      </markdown>
    </div>
    <div class="col-md-6 mb-3">
      <h2><span class="fa fa-caret-right mr-2 text-primary"></span>Work with webpack</h2>
      <markdown ngPreserveWhitespaces class="code-block-sm">
        ```diff
        // webpack.common.js
        new webpack.ProvidePlugin({{'{'}}
          ...,
        + echarts: "echarts"
        })
        ```
      </markdown>
    </div>
    <div class="col-md-6 mb-3">
      <h2><span class="fa fa-caret-right mr-2 text-primary"></span>Work with SystemJS</h2>
      <markdown ngPreserveWhitespaces class="code-block-sm">
        ```diff
        // systemjs.config.js
        {{'{'}}
          map: {{'{'}}
            // ngx-echarts
        +   'echarts': 'npm:echarts',
        +   'ngx-echarts': 'npm:ngx-echarts'
          },
          packages: {{'{'}}
            // ngx-echarts
        +   echarts: {{'{'}}
        +     defaultExtension: 'js',
        +     main: 'dist/echarts.min.js',
        +     meta: {{'{'}}
        +       './*.js': {{'{'}}
        +         format: 'global', // load this module as a global
        +         exports: 'echarts'
        +       }
        +     }
        +   },
        +   'ngx-echarts': {{'{'}}
        +     defaultExtension: 'js',
        +     main: 'bundles/ngx-echarts.umd.js',
        +     meta: {{'{'}}
        +       './*.js': {{'{'}}
        +         deps: ['echarts']
        +       }
        +     }
        +   }
          }
        }
        ```
      </markdown>
    </div>
    <div class="col-md-6 mb-3">
      <h2><span class="fa fa-caret-right mr-2 text-primary"></span>Draw echarts</h2>
      <markdown class="code-block-sm" [data]="demo_html | language: 'html'"></markdown>
    </div>
  </div>
</div>
